<template>
  <view class="manbtm">
    <!-- 头像部分 -->
    <view class="message_box">
      <view class="header_image" @click="ToMyStore()">
        <image :src="mender.avator" style=""></image>
      </view>
      <view class="box_left">
        <view class="FlexBox">
          <view class="bold size1">皖集采</view>
          <view class="bold ToMyStore" @click="ToMyStore()">进入我的小店</view>
        </view>
        <view class="size2"
          >昵 &nbsp;&nbsp;称：{{ mender.nickname || mender.member_name }}</view
        >
        <view class="size2 FlexBox" style="width: 540rpx">
          <view>推荐人：{{ mender.recommend_name }}</view>
          <button v-if="mender.wx_levels" class="level_btn">
            {{ mender.wx_levels }}
          </button>
        </view>
      </view>
    </view>
    <!-- 余额等 -->
    <view class="yue FlexBox" style="">
      <view class="th_box th_box_border">
        <view>佣金</view>
        <view class="fc">{{ mender.commission }}</view>
      </view>
      <!-- <view class="th_box th_box_border">
				<view>积分</view>
				<view class="fc">{{mender.commission  }}</view>
			</view> -->
      <view @click="toFans" class="th_box">
        <view>粉丝数量</view>
        <view class="fc">{{ mender.member_count }}</view>
      </view>
      <view class="th_box">
        <button class="tx_btn" @click="goTake()">提现</button>
      </view>
    </view>

    <!-- 佣金 -->
    <view class="commission">
      <view class="commission_item">
        <view class="fc">{{ mender.cash_amount }}</view>
        <view>成功提现佣金(元)</view>
      </view>
      <view class="commission_item">
        <view class="fc">{{ mender.has_cash }}</view>
        <view>可提现佣金(元)</view>
      </view>
    </view>

    <!-- 邀请码 -->
    <view class="code">
      <image src="@/static/images/item00.png"></image>
      <view class="size1"
        >我的邀请码：{{ mender.member_id }}
        <!-- #ifdef H5 -->
        <text
          class="item-btn"
          v-clipboard:copy="mender.member_id"
          v-clipboard:success="(type) => onCopyResult('success')"
          v-clipboard:error="(type) => onCopyResult('error')"
          >复制
        </text>
        <!-- #endif -->
        <!-- #ifndef H5 -->
        <text class="item-btn" @click="paste(mender.member_id)">复制</text>
        <!-- #endif -->
      </view>
    </view>
    <!-- 模块 -->
    <view class="flex_warp pad">
      <navigator
        url="/member/distribution/commission_log"
        class="module flex_center_center"
      >
        <view>
          <image
            src="@/static/images/item02.png"
            style="height: 70rpx; width: 75rpx"
          ></image>
          <view>我的佣金</view>
        </view>
      </navigator>
      <navigator url="order_list" class="module flex_center_center">
        <view>
          <image
            src="@/static/images/item07.png"
            style="height: 70rpx; width: 65rpx"
          ></image>
          <view>分销订单</view>
        </view>
      </navigator>
      <!-- <view class="module flex_center_center">
				<view>
					<image src="../../static/images/item06.png" style="height: 70rpx;width: 75rpx;"></image>
					<view>我的推荐人</view>
				</view>
			</view> -->
      <view class="module flex_center_center" @click="withdrawal()">
        <view>
          <image
            src="@/static/images/item03.png"
            style="height: 68rpx; width: 71rpx"
          ></image>
          <view>提现明细</view>
        </view>
      </view>
      <navigator url="./myTeam" class="module flex_center_center">
        <view>
          <image
            src="@/static/images/item04.png"
            style="height: 70rpx; width: 80rpx"
          ></image>
          <view>我的团队</view>
        </view>
      </navigator>
      <!-- <view class="module flex_center_center">
				<view>
					<image src="../../static/images/item05.png" style="height: 70rpx;width: 50rpx;"></image>
					<view>我的红包</view>
				</view>
			</view> -->
      <navigator url="./richList" class="module flex_center_center">
        <view>
          <image
            src="@/static/images/item01.png"
            style="height: 65rpx; width: 73rpx"
          ></image>
          <view>富豪榜</view>
        </view>
      </navigator>
      <navigator url="./storeSet" class="module flex_center_center">
        <view>
          <image
            src="/static/images/myStore.png"
            style="height: 70rpx; width: 80rpx"
          ></image>
          <view>小店设置</view>
        </view>
      </navigator>
    </view>

    <view class="commission">
      <navigator url="optionalProduct">
        <view class="commission_item FlexBox">
          <view class="fc"> 自选商品 </view>
          <image
            style="width: 13rpx; margin-right: 20rpx"
            src="@/static/images/right_arrow.png"
            mode="widthFix"
          ></image>
        </view>
      </navigator>
    </view>
    <view class="commission" @click="ToMyStore()">
      <view class="commission_item FlexBox">
        <view class="fc"> 进入我的小店 </view>
        <image
          style="width: 13rpx; margin-right: 20rpx"
          src="@/static/images/right_arrow.png"
          mode="widthFix"
        ></image>
      </view>
    </view>
    <Jump-home></Jump-home>
  </view>
</template>

<script>
import JumpHome from "@/member/components/Jump-home/Jump-home.vue";
export default {
  components: {
    JumpHome,
  },
  data() {
    return {
      userList: [],
      mender: [],
      points: "",
    };
  },
  onShow() {
    this.myFenxiao();
  },
  methods: {
    paste(value) {
      uni.setClipboardData({
        data: value,
        success: function () {
          console.log("success");
        },
      });
      alert;
    },
    onCopyResult(type) {
      if (type === "success") {
        uni.showToast({
          title: "复制成功",
          icon: "none",
        });
        console.log("复制成功");
      } else {
        console.log("复制失败");
      }
    },
    toFans() {
      uni.navigateTo({
        url: "./myFans",
      });
    },
    ToMyStore() {
      uni.navigateTo({
        url: "/member/distribution/MyStore",
      });
    },

    myFenxiao() {
      //我的分销
      this.$util
        .request({
          url: "/mobile/index.php?act=distribution&op=index",
          method: "get",
          data: {},
        })
        .then((res) => {
          console.log(res);
          this.mender = res.datas;
          if (!res.datas.has_set_shop_info) {
            uni.navigateTo({
              url: "/member/distribution/storeSet",
            });
          }
        });
    },

    //提现
    goTake() {
      if (this.mender.member_is_auth) {
        uni.navigateTo({
          url: "/member/wallet/withdrawal",
        });
      } else {
        uni.showToast({
          title: "您暂未实名认证",
          icon: "none",
          success() {
            setTimeout(() => {
              uni.navigateTo({
                url: "/member/auth/Authentication",
              });
            }, 1000);
          },
        });
      }
    },
    //提现明细
    withdrawal() {
      uni.navigateTo({
        url: "withdrawal_log",
      });
    },
  },
};
</script>

<style scoped>
.ToMyStore {
  background-color: #f33192;
  padding: 0 15rpx;
  border-radius: 10rpx;
}
.FlexBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
uni-button:after {
  border: none;
}
.manbtm {
  margin-bottom: 50rpx;
  padding-bottom: 50rpx;
}
/* mingix */
.fc2 {
  color: #666666;
}
.money_item .left {
  margin-left: 30rpx;
}
.back {
  background-color: #ffffff !important;
}
.money_item {
  width: 49.8%;
  background-color: #ffffff;
  height: 178rpx;
  border-right: 1rpx solid #f0f0f0;
  border-bottom: 1rpx solid #f0f0f0;
}
/* .money_item:nth-child(n+2){
		border-bottom: none;
	} */
.money_item:nth-child(2n) {
  border-right: none;
}
.money_item:last-child {
  border-right: none;
  border-bottom: none;
}
/* 佣金 */
.commission {
  margin: 20rpx 0;
}
.commission_item {
  background-color: #ffffff;
  padding: 20rpx 0 20rpx 48rpx;
}
.commission_item:first-child {
  border-bottom: 1rpx solid #f0f0f0;
}
/* 邀请码 */
.code {
  height: 80rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
}
.code image {
  height: 32rpx;
  width: 32rpx;
  margin: 0 15rpx 0 50rpx;
}
/*模块*/
.flex_warp {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
}
.flex_center_center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.module {
  width: 33%;
  height: 195rpx;
  background-color: #fafafa;
  /* border-right: 1rpx solid #F0F0F0;
		border-top: 1rpx solid #F0F0F0; */
}
.pad {
  padding: 20rpx 0;
  background-color: #fafafa;
}
.module:nth-child(-n + 3) {
  border-top: none;
}
.module:nth-child(3n) {
  border-right: none;
}

/* 账号面板 */
.yue {
  height: 105rpx;
  display: flex;
  padding: 14rpx 0;
  background-color: #ffffff;
  align-items: center;
  text-align: center;
}
.fc {
  color: #ff4300;
}
.th_box {
  width: 25%;
}
.th_box_border {
  /* border-right: 2upx solid #F0F0F0; */
}
.tx_btn {
  height: 44rpx;
  width: 100rpx;
  border-radius: 5rpx;
  background-color: #ff4300;
  color: #ffffff;
  font-size: 28rpx;
  padding: 0;
  line-height: 44rpx;
}
/* 头像部分 */
.flex_bettween {
  display: flex;
  justify-content: space-between;
}
.bold {
  font-weight: bold;
}
.size1 {
  font-size: 32rpx;
}
.size2 {
  font-size: 28rpx;
}
.size3 {
  font-size: 24rpx;
}
.header_image {
  width: 122rpx;
  height: 122rpx;
  border-radius: 50%;
  background-color: #ffffff;
}
.header_image image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.box_left {
  color: #ffffff;
  margin-left: 25rpx;
}
.level_btn {
  height: 38rpx;
  width: 158rpx;
  border: 1px solid #ffffff;
  border-radius: 28rpx;
  background-color: #ff4300;
  line-height: 36rpx;
  font-size: 24rpx;
  color: #ffffff;
  text-align: center;
  padding: 0;
  margin: 0 0 0 100rpx;
}
.message_box {
  background-image: linear-gradient(to right, #ff4300, #ff4300);
  height: 186rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}
.item-btn {
  margin-left: 30rpx;
  background-image: linear-gradient(to right, #ff4300, #ff4300);
  color: #ffffff;
  padding: 5rpx 10rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
}
</style>
